import React, { useState } from 'react';
import PropTypes from 'prop-types';
import s from './style.module.css';
import Helper from '../../../../../components/Helper';
import ECharts from '@kuiper-components/echarts';
import cn from 'classnames';
import { cloneDeep } from 'lodash';
import Icon from '../../icon';

export default function Info({ detail }) {
	//	二级链接内链总数量
	const intra2 = detail?.secondary_urls_statistics?.intra_urls_count || 0;
	//	二级链接内链正常可访问数量
	const intra2normal =
		detail?.secondary_urls_statistics?.intra_normal_urls_count || 0;
	//  二级链接外链总数量
	const extra2 = detail?.secondary_urls_statistics?.extra_urls_count || 0;
	// 二级链接外链正常可访问数量
	const extra2normal =
		detail?.secondary_urls_statistics?.extra_normal_urls_count || 0;
	const intra2p =
		detail?.secondary_urls_statistics?.intra_normal_urls_proportion || 0;

	const intra3 = detail?.tertiary_urls_statistics?.intra_urls_count || 0;
	const intra3normal =
		detail?.tertiary_urls_statistics?.intra_normal_urls_count || 0;
	const extra3 = detail?.tertiary_urls_statistics?.extra_urls_count || 0;
	const extra3normal =
		detail?.tertiary_urls_statistics?.extra_normal_urls_count || 0;
	const intra3p =
		detail?.tertiary_urls_statistics?.intra_normal_urls_proportion || 0;

	const initECharts = e => {
		const option = {
			title: {
				text: '100%',
				top: 'middle',
				left: '46%',
				textAlign: 'center',
				textStyle: {
					fontSize: 12,
					fontWeight: 'normal',
				},
			},
			series: {
				hoverAnimation: false,
				type: 'pie',
				radius: ['60%', '75%'],
				center: ['50%', '50%'],
				label: {
					show: false,
					normal: {
						show: false,
						position: 'outside',
					},
					emphasis: {
						show: false,
						textStyle: {
							fontSize: 20,
							fontWeight: 'normal',
						},
					},
				},
				labelLine: {
					normal: {
						show: false,
					},
					emphasis: {
						show: false,
					},
				},
			},
		};
		const option2 = cloneDeep(option);
		const option1Data = [
			{
				name: 'IPv6支持率',
				value: intra2normal || null,
				itemStyle: {
					color: '#11AB4E',
				},
			},
			{
				name: 'IPv6未支持率',
				value: intra2 - intra2normal,
				itemStyle: {
					color: '#ecf0f6',
				},
			},
		];
		const option2Data = [
			{
				name: 'IPv6支持率',
				value: intra3normal || null,
				itemStyle: {
					color: '#11AB4E',
				},
			},
			{
				name: 'IPv6支持率',
				value: intra3 - intra3normal,
				itemStyle: {
					color: '#ecf0f6',
				},
			},
		];
		option.series.data = option1Data;
		option.title.text = (intra2p * 100).toFixed(2) + '%';
		option2.title.text = (intra3p * 100).toFixed(2) + '%';
		option2.series.data = option2Data;
		if (e) {
			return option2;
		} else {
			return option;
		}
	};
	return (
		<div className={s.box}>
			<div>
				<p className={s.title}>二级链接</p>
				<div className={s.showBox}>
					<div className={s.chartBox}>
						<ECharts className={cn(s.chart)} key={1} option={initECharts(0)} />
						<p>
							IPv6 支持率
							<Helper
								placement="top"
								overlay={
									'按照国家IPv6发展监测平台指标，网站二级链接IPv6支持率=（可访问二级内链数/二级内链总数）×100%'
								}
							/>
						</p>
					</div>
					<div className={s.linkBox}>
						<p className={s.linkIconP}>
							<Icon active={9} />
							<span>总内链数（{intra2}）</span>
						</p>
						<div className={s.linkN}>
							<div
								className={s.animN}
								style={{
									width: (intra2normal / intra2) * 100 + '%',
									'border-top-right-radius':
										intra2normal / intra2 === 1 ? '4px' : '0px',
									'border-bottom-right-radius':
										intra2normal / intra2 === 1 ? '4px' : '0px',
								}}
							></div>
						</div>
						<p className={s.linkNum}>
							<span>可访问内链数</span>
							<span>{intra2normal}</span>
						</p>
					</div>
					<div className={s.linkBox}>
						<p className={s.linkIconP}>
							<Icon active={10} />
							<span>总外链数（{extra2}）</span>
						</p>
						<div className={cn(s.linkN, s.linkW)}>
							<div
								className={cn(s.animN, s.animW)}
								style={{
									width: (extra2normal / extra2) * 100 + '%',
									'border-top-right-radius':
										extra2normal / extra2 === 1 ? '4px' : '0px',
									'border-bottom-right-radius':
										extra2normal / extra2 === 1 ? '4px' : '0px',
								}}
							></div>
						</div>
						<p className={s.linkNum}>
							<span>可访问外链数</span>
							<span>{extra2normal}</span>
						</p>
					</div>
				</div>
			</div>
			<div>
				<p className={s.title}>三级链接</p>
				<div className={s.showBox}>
					<div className={s.chartBox}>
						<ECharts className={cn(s.chart)} key={1} option={initECharts(1)} />
						<p>
							IPv6 支持率
							<Helper
								placement="top"
								overlay={
									'按照国家IPv6发展监测平台指标，网站三级链接IPv6支持率=（可访问三级内链数/三级内链总数）×100%'
								}
							/>
						</p>
					</div>
					<div className={s.linkBox}>
						<p className={s.linkIconP}>
							<Icon active={9} />
							<span>总内链数（{intra3}）</span>
						</p>
						<div className={s.linkN}>
							<div
								className={s.animN}
								style={{
									width: (intra3normal / intra3) * 100 + '%',
									'border-top-right-radius':
										intra3normal / intra3 === 1 ? '4px' : '0px',
									'border-bottom-right-radius':
										intra3normal / intra3 === 1 ? '4px' : '0px',
								}}
							></div>
						</div>
						<p className={s.linkNum}>
							<span>可访问内链数</span>
							<span>{intra3normal}</span>
						</p>
					</div>
					<div className={s.linkBox}>
						<p className={s.linkIconP}>
							<Icon active={10} />
							<span>总外链数（{extra3}）</span>
						</p>
						<div className={cn(s.linkN, s.linkW)}>
							<div
								className={cn(s.animN, s.animW)}
								style={{
									width: (extra3normal / extra3) * 100 + '%',
									'border-top-right-radius':
										extra3normal / extra3 === 1 ? '4px' : '0px',
									'border-bottom-right-radius':
										extra3normal / extra3 === 1 ? '4px' : '0px',
								}}
							></div>
						</div>
						<p className={s.linkNum}>
							<span>可访问外链数</span>
							<span>{extra3normal}</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	);
}
Info.propTypes = {
	detail: PropTypes.any,
};
